<template>
    <div class="Index">
      <div class="line"></div>
      <h3 style="margin-top:20px">首页标签管理</h3>

      <el-menu :default-active="true" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <template v-for="(item,index) in this.menuList" v-if="!item.hidden">
          <el-submenu :key="Index" :index="Index+''">
            <template slot="title">
              <i :class="item.iconCls" style="color: #20a0ff;width: 14px;"></i>
              <span slot="title">{{item.name}}</span>
            </template>
            <el-menu-item width="180px"
                          style="padding-left: 30px;padding-right:0px;margin-left: 0px;width: 170px;text-align: left"
                          v-for="child in item.children"
                          :index="child.path"
                          :key="child.path">{{child.name}}

            </el-menu-item>
          </el-submenu>
        </template>

       </el-menu>

      <h3 style="margin-top:20px">Logo配置</h3>
      <div class="line"></div>
      <img v-bind:src="logoConfig.value.src" @click="dialogVisibleFun(logoConfig.value,logoConfig.id,logoConfig.code)" style="width: 300px;height: 200px"/>

      <h3 style="margin-top:20px">走马灯配置</h3>
      <div class="line"></div>
      <div >
        <template>
          <ul class="carousel">
            <li :key="index" v-for="(item,Index) in carouselList" class="infinite-list-item">
              <img v-bind:src="item.value.src" width="200" height="140" @click="dialogVisibleFun(item.value,item.id,item.code)"/>
              <div style="text-align: center">{{ '图' + (Index + 1) }}</div>
            </li>
            <li><el-button type="primary" icon="el-icon-plus" @click="addCarousel"/></li>
          </ul>

        </template>
        <div style="clear:both;text-align: center; ">

          <el-button type="text" @click="getMore"  :disabled="loadStatus">{{text}}</el-button>
        </div>
      </div>
     <div>
       <el-dialog
           title="图片管理"
           :visible.sync="dialogVisible"
           width="40%"

           destroy-on-close="true"
           :before-close="handleClose">
         <div>
           <el-upload
               limit="1" list-type="picture"
               class="upload-demo"
               drag
               :file-list="files"
               :on-success="uploadSuccess"
               action="/api/fileInfo/uploadFile"
               style="width: 100px"
               multiple>
             <i class="el-icon-upload"></i>
             <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
             <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
           </el-upload>
           <el-input
               type="textarea"
               autosize
               placeholder="请输入超链接"
               v-model="modifyDict.link">
           </el-input>


         </div>
         <span slot="footer" class="dialog-footer">
           <el-button type="danger" v-if="modifyCode!='logo'" @click="delDict">删除</el-button>
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="subDict">确 定</el-button>



          </span>
       </el-dialog>

     </div>

    </div>
</template>
<script>
import {Message} from "element-ui";

export default {

  data() {
      return{
        //菜单
        menuList:[],

        //logo
        logoConfig:{
        },
        //轮播
        carouselList:[],
        carouseCount:0,
        currentPage:1,
        pageSize:6,
        prevLoadCount:null,
        text:"加载更多",
        loadStatus: false,
        modifyDict:{},
        modifyId:null,
        modifyCode:'',
        dialogVisible: false,
        files:[]
      }
    },
    methods:{
      getTabsConfig(){
        this.postRequestJson('/api/tg/menu/menuTree',{'type':'portal'}).then(resp=>{
          this.menuList=resp.data.data
        })
      },
      getLogoConfig() {
        this.getRequest("api/tg/portal/getLogoConfig",null).then(resp=>{
          this.logoConfig = resp.data.data
           let valStr = resp.data.data.val
           let obj = JSON.parse(valStr);
           this.logoConfig.value = obj
        })
      },
      getCarouselConfig(){
        let param={queryPageDTO:{currentPage:this.currentPage,pageSize:this.pageSize }};
        this.postRequestJson("api/tg/portal/getCarouselConfig",param).then(resp=>{
         let count=resp.data.data.length
          if (this.pageSize> count) {
            this.loadStatus= true
            this.text = "已全部加载"
          }
          this.prevLoadCount = count

          resp.data.data.forEach(p=>{
            let valStr = p.val
            let obj = JSON.parse(valStr);
            p.value = obj
            this.carouselList.push(p)
          })
        })
      },
      handleSelect(){
        this.carouselList.push(this.load())
      },
      getMore(){
        this.pageSize+=6
        this.getCarouselConfig()
      },
      dialogVisibleFun(dict,id,code){
        this.modifyDict =dict
        this.modifyId = id
        this.modifyCode = code

        let file ={}
        file.url = this.modifyDict.src
        this.files.push(file)
        this.dialogVisible = true
      },
      addCarousel(){

        this.modifyDict = {src:"",link:""}
        this.modifyId = null
        this.dialogVisible = true
      },
      handleClose(){
        this.files =[]
        this.dialogVisible = false
      },
      uploadSuccess(res){
        if(res.code ==='0') {
          this.modifyDict.src = res.data

          Message.info("上传成功")
        }else {
          Message.error("上传失败")
        }
      },
      subDict() {
        this.dialogVisible = false;
        let param = {}
        param.id = this.modifyId
        param.val = JSON.stringify( this.modifyDict)
        this.postRequestJson("api/tg/portal/reDictPic",param).then(p=>{
          if (p.data.code=='0'){
            this.resetCarousel()
            this.getCarouselConfig()
          }
        })
      },
      delDict() {
        this.$confirm('是否删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.postRequest("api/tg/portal/delBatchDict",{ids:[this.modifyId]}).then(p=>{
            if (p.data.code =='0') {
              Message.info("删除成功")
              this.resetCarousel()
              this.getCarouselConfig()
              this.dialogVisible = false
            }
          })
        })

      },
      resetCarousel(){
        this.carouselList = []
        this.currentPage=1
      }

    },
    created() {
      this.getTabsConfig()
      this.getLogoConfig()
      this.getCarouselConfig()

    },
    mounted() {
    }
  }
</script>
<style>
.carousel li{
  float: left;
  margin: 10px;
  list-style: none;

}
</style>

